﻿@namespace BlazorDemo.Pages.CaseViews
@inject ICountryNamesProvider CountryNamesService

<div class="demo-description">
    <h2><DemoNavLink Link="ListBox#VirtualScrolling" />Virtual Scrolling</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.ListRenderMode">ListRenderMode</a> property specifies how the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2">List Box</a> loads the item list.
    </p>
    <ul>
        <li><b>Entire</b> - The List Box loads the entire item list. Use this option for small item lists where scrolling should be instantly.</li>
        <li><b>Virtual</b> - The List Box loads visible items only. This approach improves performance when the list contains many items.</li>
    </ul>
    <p>
        In this demo, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2.ListRenderMode">ListRenderMode</a> property is set to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.ListRenderMode">ListRenderMode.Virtual</a>.
    </p>
</div>

@if (Data != null)
{
    <DxListBox Data="@Data"
               ListRenderMode="ListRenderMode.Virtual"
               TData="Country"
               TValue="Country"
               TextFieldName="@nameof(Country.CountryName)"
               CssClass="demo-listbox"
               style="height: 232px">
    </DxListBox>

    <CodeSnippet_Editors_ListBox_VirtualScrolling/>
}

@code {
    IEnumerable<Country> Data { get; set; }

    protected override async Task OnInitializedAsync() {
        Data = await CountryNamesService.LoadAsync();
    }
}
